<template>
	<div class="session-info-container">
		<session-top @choose="choose"></session-top>
		<div class="session-container">
			<div v-if="index == 1" style="width: 100%">
				<!-- 场景变量组件 -->
				<SceneVariables :sessionId="sessionId" />
			</div>
			<div v-if="index === 2">
				<!-- 聊天记录组件 -->
				<SessionMessage :sessionId="sessionId"></SessionMessage>
			</div>
			<div v-if="index == 3">
				<!-- 全局校验记录组件 -->
				<ValidateRecord :sessionId="sessionId" />
			</div>
			<div v-if="index === 4">
				<!-- 业务操作记录组件 -->
				<BuisnessRecord :sessionId="sessionId" />
			</div>
			<div v-if="index === 5">
				<!-- 表单列表组件 -->
				<FormList :sessionId="sessionId"></FormList>
			</div>
			<div v-if="index === 6">
				<!-- 接听记录组件 -->
				<TransferRecord :sessionId="sessionId"></TransferRecord>
			</div>
			<div v-if="index === 7">
				<!-- 文件列表组件 -->
				<FileList :sessionId="sessionId" />
			</div>
			<div v-if="index === 8">
				<!-- 工作流记录 -->
				<WorkflowRecord :sessionId="sessionId" />
			</div>
			<div v-if="index === 9">
				<!-- 服务满意度 -->
				<ServiceSatisfaction :sessionId="sessionId" />
			</div>
			<div v-if="index === 10">
				<!-- 通话质量组件 -->
				<CallQuality :sessionId="sessionId" />
			</div>
			<div v-if="index === 11">
				<!-- 实时质检报告组件 -->
				<QualityReport :sessionId="sessionId" />
			</div>
			<div v-if="index === 12">
				<!-- 会话小结 -->
				<SessionSummary :sessionId="sessionId" />
			</div>
		</div>
	</div>
</template>

<script>
import SessionTop from './SessionTop.vue';
import FormList from './FormList.vue';
import TransferRecord from './TransferRecord.vue';
import ValidateRecord from './ValidateRecord.vue';
import BuisnessRecord from './BuisnessRecord.vue';
import SessionMessage from './SessionMessage.vue';
import FileList from './FileList.vue';
import SceneVariables from './SceneVariables.vue';
import WorkflowRecord from './WorkflowRecord.vue';
import ServiceSatisfaction from './ServiceSatisfaction.vue';
import CallQuality from './CallQuality.vue';
import QualityReport from './QualityReport.vue';
import SessionSummary from './SessionSummary.vue';
export default {
	name: 'Session',
	components: {
		SessionTop,
		FormList,
		TransferRecord,
		FileList,
		ValidateRecord,
		BuisnessRecord,
		SessionMessage,
		SceneVariables,
		WorkflowRecord,
		ServiceSatisfaction,
		CallQuality,
		QualityReport,
		SessionSummary
	},
	data() {
		return {
			index: this.$route.query.type || 1,
			sessionId: this.$route.query.sessionId
		};
	},
	methods: {
		/*切换头部的tab 页面*/
		choose(index) {
			this.index = index;
		}
	}
};
</script>

<style lang="less" scoped>
.filelist {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
}

.form {
	font-size: 14px;
	margin-top: 10px;
	margin-bottom: 10px;
	color: rgba(51, 51, 51, 1);
	font-size: 12px;
	text-align: left;
}

/*span{*/
/*background-color: yellow;*/
/*}*/

.row {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	/*border: 1px solid #2c3e50;*/
	border-bottom: 1px solid rgba(229, 229, 234, 1);
	/*margin-top: 10px;*/
}

.rowop {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	margin-top: 10px;
}

.content {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}

.image {
	width: 200px;
	height: 200px;
	margin-left: 20px;
	object-fit: contain;
	margin-top: 10px;
	border: 1px solid rgba(142, 142, 147, 1);
}

.item {
	margin-top: 10px;
	width: 100%;
}

.back1 {
	background: rgba(247, 248, 249, 1);
}

.back2 {
	background: white;
}

.top {
	width: 100%;
	height: 40px;
	background: rgba(247, 248, 249, 1);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: center;
}

.t {
	width: 100%;
	height: 23px;
	font-size: 16px;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	line-height: 24px;
	text-align: left;
	margin-left: 26px;
	margin-top: 10px;
}

.info {
	width: 90%;
	/*height:207px;*/
	background: rgba(251, 250, 250, 1);
	border-radius: 10px;
	margin-left: 25px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.formItem {
	color: rgba(132, 132, 132, 1);
	font-size: 12px;
	margin-left: 20px;
	margin-right: 10px;
	min-width: 60px;
}

.textFormat {
	margin-right: 20px;
	color: rgba(142, 142, 147, 1);
	margin-left: 10px;
}

.systemTextFormat {
	margin-right: 20px;
	color: rgba(142, 142, 147, 1);
	margin-left: 60px;
}

.system-record {
	color: crimson;
}
.link {
	cursor: pointer;
	color: dodgerblue;
}
.systemTextFormat p {
	padding-bottom: 20px;
}
.flow {
	padding: 40px 0;
}
.user-info,
.task-info {
	padding: 40px 0;
}
.steps {
	padding: 10px 0;
	font-weight: 700;
}
</style>
